<template>
  <div class="page-recommond">
    <!-- 左侧文章展示 -->
    <div class="left-cont">
      <h2>热门推荐
        <img :src="hotIcon"
             alt="">

      </h2>
      <!-- 文章列表 -->
      <recom-item :artiList="artiList" />
    </div>
    <!-- 右侧相关展示 -->
    <div class="right-other">
      <!-- 旅途游记推荐 -->
      <div class="tour-recom">
        <h3>旅行者游记</h3>
        <!-- 走马灯 -->
        <el-carousel trigger="click"
                     arrow="never"
                     :interval="5000"
                     height="330px">
          <el-carousel-item v-for="item in newRecoNote"
                            :key="item.id">
            <img :src="item.image"
                 @click="goCommuDetail(item.id)"
                 alt="">
            <h3>{{item.title}}</h3>
            <p>{{item.text}}</p>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import recomItem from '@/components/RecomItem.vue' // 推荐文章组件
import hotIcon from '@/assets/svg/hot.svg'
import imgs from '@/assets/images/banner-2.jpg'
import banner1 from '@/assets/images/login-bgi.jpg'
import { getRecomList } from '@/api/article'
export default {
  components: {
    recomItem
  },
  data() {
    return {
      imgs,
      hotIcon,
      /* 文章列表 */
      artiList: [
        {
          id: 1,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，其沿岸分布着安克雷奇、西厄德、瓦尔德兹和科尔多瓦等良港，是美国宣布战时必须要控制的海上航道咽喉的第一个。',
          image: imgs,
          author: '揽山君'
        },
        {
          id: 2,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，',
          image: imgs,
          author: '揽山君'
        },
        {
          id: 3,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，其沿岸分布着安克雷奇、西厄德、瓦尔德兹和科尔多瓦等良港，是美国宣布战时必须要控制的海上航道咽喉的第一个。',
          author: '揽山君'
        },
        {
          id: 4,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，其沿岸分布着安克雷奇、西厄德、瓦尔德兹和科尔多瓦等良港，是美国宣布战时必须要控制的海上航道咽喉的第一个。',
          author: '揽山君'
        }
      ],
      /* 推荐游记 */
      recoNote: [
        {
          id: 1,
          title: '西安：旧长安的画皮',
          text: '阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间。为北太平洋自然条件较好的海湾之一，其沿岸分布着安克雷奇、西厄德、瓦尔德兹和科尔多瓦等良港，是美国宣布战时必须要控制的海上航道咽喉的第一个。',
          image: banner1
        },
        { id: 2, title: '阿拉斯加海湾', text: '西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。', image: imgs }
      ]
    }
  },
  methods: {
    /* 去往详情页 */
    goCommuDetail(id) {
      this.$router.push({
        path: '/commuarticle',
        query: {
          id
        }
      })
    },
    /* 初始化文章推荐列表 */
    async initArticleList() {
      let { data: res } = await getRecomList()
      console.log(res.data)
      this.artiList = res.data
    }
  },
  created() {
    this.initArticleList()
  },
  computed: {
    // 游记text字符处理
    newRecoNote() {
      return this.recoNote.map(item => {
        return {
          id: item.id,
          title: item.title,
          text: item.text.split('。')[0] + '。',
          image: item.image
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-recommond {
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
  width: 1060px;
  /* 左侧文章展示 */
  .left-cont {
    width: 70%;
    /* 标签说明 */
    h2 {
      position: relative;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 1px;
      color: #33c5c5;

      img {
        width: 22px;
        height: 22px;
      }
    }
  }
  /* 右侧相关推荐 */
  .right-other {
    width: 25%;
    /* 游记 */
    .tour-recom {
      margin-top: 20px;
      h3 {
        font-size: 17px;
        height: 40px;
        line-height: 40px;
      }
      /* 走马灯 */
      ::v-deep(.el-carousel) {
        .el-carousel__indicator {
          padding: 10px 2px;
          .el-carousel-item {
            cursor: pointer;
          }
          .el-carousel__button {
            width: 25px;
            height: 5px;
            border-radius: 2px;
          }
        }
        .el-carousel__indicators--horizontal {
          width: 100%;
          top: 128px;
          left: 52%;
          transform: translateX(-50%);
        }
      }
      img {
        width: 100%;
        height: 150px;
        cursor: pointer;
      }
      p {
        font-size: 14px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6; // 超过省略
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>